$(function(){
    layui.form.verify({
        title:[
            /^[\S]{1,20}$/,
            '文章标题不能有空字符！'
        ]
    })

   axios({
       url:'/my/article/cates',
       method:'get'
   }).then(({data:res})=>{
      if(res.status!==0){
          return layer.msg(res.message)
      }
       let arr = ['<option value="">请选择文章类别</option>']
      res.data.forEach(value => {
          arr.push(`
             <option value="${value.Id}">${value.name}</option>
          `)
      })
       $('[name="cate_id"]').html(arr.join(''))
       layui.form.render()
   })

    initEditor()

    // 1. 初始化图片裁剪器
    let $image = $('#image')

    // 2. 裁剪选项
    let options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)

    $('#chooseImageBtn').on('click',function(){
        $('#chooseImageInp').click()
    })

    $('#chooseImageInp').on('change',function(e){
        let file = e.target.files[0]
        let url = URL.createObjectURL(file)
        $image
            .cropper('destroy')      // 销毁旧的裁剪区域
            .attr('src', url)  // 重新设置图片路径
            .cropper(options)        // 重新初始化裁剪区域
    })

    let state=''

    $('#btn1').on('click',function(){
        state='已发布'
    })

    $('#btn2').on('click', function () {
        state = '草稿'
    })

    $('form').on('submit',function(e){
        e.preventDefault()
        let fd=new FormData(this)
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) { 
                fd.append('cover_img',blob)
                fd.append('state',state)     // 将 Canvas 画布上的内容，转化为文件对象
               axios({
                   url:'/my/article/add',
                   method:'POST',
                   data:fd
               }).then(({data:res})=>{
                   if(res.status!==0){
                       return layer.msg(res.message)
                   }
                   layer.msg('操作成功')
                   setTimeout(()=>{
                       window.parent.document.querySelector('#art_list').click()
                   },1000)
               })
            })
    })

})